<template>
  <el-dropdown @command = "handleSetLanguage" class = "languages" trigger = "click">
    <div style = "font-size: 15px;color: #f7f7f7">
      　　　　
      <span>{{ langName }}</span>
      　　　　
      <i class = "el-icon-arrow-down el-icon--right"/>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled = "language==='zh'" command = "zh">中文</el-dropdown-item>
        <el-dropdown-item :disabled = "language==='en'" command = "en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import {ref} from "vue";

export default {
  name: "Locale",
  setup() {
    const langName = ref('');
    const language = ref('');
    return {
      langName,
      language
    }
  },
  methods: {
    handleSetLanguage(lang) {
      if (lang === 'zh') {
        this.langName = '中文';
      } else {
        this.langName = 'English';
      }
      this.language = lang;
      localStorage.setItem('lang', lang);
      location.reload();
    }
  },
  mounted() {
    if (localStorage.getItem('lang') == undefined || localStorage.getItem('lang') == 'zh') {
      this.langName = '中文';
      this.language = 'zh';
    } else {
      this.langName = 'English';
      this.language = 'en';
    }
  }
}
</script>

<style scoped>
.languages {
  width: 76px;
  float: left;
  padding-top: 0px;
  margin-top: -10px;
  text-align: center;
}
</style>